<template>
  <el-row>
    <el-col :span="2">
      <el-card class="box-card">
        <template #header>
          <div class="box-header">
            <span class="box-title"> 今日数据 </span>
          </div>
        </template>
        <br />
        <el-row type="flex" justify="center">咨询数</el-row>
        <el-row type="flex" justify="center">
          {{ todayConversationNumber }}
        </el-row>
        <br />
        <br />
        <el-row type="flex" justify="center">咨询时长 </el-row>
        <el-row type="flex" justify="center">
          {{ todayConversationTime }}
        </el-row>
        <br />
        <br />
        <el-row type="flex" justify="center">正在咨询</el-row>
        <el-row type="flex" justify="center">
          {{ todayInConversation }}
        </el-row>

        <el-col> </el-col>
      </el-card>
    </el-col>

    <el-col :span="11">
      <el-card class="card-table">
        <template #header>
          <div class="card-header">
            <span class="head-title"> 咨询师总览 </span>
            <el-pagination
              background
              v-model:currentPage="queryForm_consultant.page"
              v-model:page-size="queryForm_consultant.size"
              layout="total, prev, pager, next, jumper"
              :total="total_consultant"
              @current-change="handleCurrentChange_consultant"
            />
          </div>
        </template>
        <el-row>
          <td
            v-for="(item, index) in tableData_consultant.slice(0, 3)"
            :key="index"
          >
            <el-card class="card-item1">
              <!-- <span>
              {{ item.name }}
              {{
                "item.status == 0"
                  ? "离线"
                  : "item.status == 1"
                  ? "在线"
                  : "忙碌"
              }}
              </span> -->
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td></el-row
        >
        <el-row>
          <td
            v-for="(item, index) in tableData_consultant.slice(3, 6)"
            :key="index"
          >
            <el-card class="card-item2">
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td>
        </el-row>

        <el-row>
          <td
            v-for="(item, index) in tableData_consultant.slice(6, 9)"
            :key="index"
          >
            <el-card class="card-item3">
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="11">
      <el-card class="card-table">
        <template #header>
          <div class="card-header">
            <span class="head-title"> 督导总览 </span>
            <el-pagination
              background
              v-model:currentPage="queryForm_supervisor.page"
              v-model:page-size="queryForm_supervisor.size"
              layout="total, prev, pager, next, jumper"
              :total="total_supervisor"
              @current-change="handleCurrentChange_supervisor"
            />
          </div>
        </template>
        <el-row>
          <td
            v-for="(item, index) in tableData_supervisor.slice(0, 3)"
            :key="index"
          >
            <el-card class="card-item1">
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td></el-row
        >
        <el-row>
          <td
            v-for="(item, index) in tableData_supervisor.slice(3, 6)"
            :key="index"
          >
            <el-card class="card-item2">
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td>
        </el-row>

        <el-row>
          <td
            v-for="(item, index) in tableData_supervisor.slice(6, 9)"
            :key="index"
          >
            <el-card class="card-item3">
              <template v-if="item.isOnline == 0" ><span style="color:black"> 【{{ item.name }}】离线 </span></template>
              <template v-else-if="item.isOnline == 1" ><span style="color:green"> 【{{ item.name }}】在线 </span></template>
              <template v-else-if="item.isOnline == 2" ><span style="color:yellow"> 【{{ item.name }}】忙碌 </span></template>
            </el-card>
          </td>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <div id="char" class="chart-container"></div>
  </el-row>
</template>

<script lang="ts" setup>
import {
  getChartData,
  getConsultantList,
  getConversationSummary,
  getSupervisorList,
} from "@/service/api_admin";
import { ref } from "vue";
import { onMounted } from "vue";
import * as echarts from "echarts";

//咨询师表格
const tableData_consultant = ref([]);
const queryForm_consultant = ref({
  page: 1,
  size: 9,
  role: 1,
  name: "",
});
const total_consultant = ref(0);
const initConsultantTable = async () => {
  //重新定义一个queryForm
  const tmp = {
    page: queryForm_consultant.value.page - 1,
    size: queryForm_consultant.value.size,
    role: 1,
    name: queryForm_consultant.value.name,
  };
  const res = await getConsultantList(tmp);
  console.log("res");
  console.log(res);
  tableData_consultant.value = res.data.result.counsellorList;
  total_consultant.value = res.data.result.totalCount;
};
//分页器相关
// const handleSizeChange_consultant = (pageSize: number) => {
//   queryForm_consultant.value.page = 1;
//   queryForm_consultant.value.size = pageSize;
//   initConsultantTable();
// };
const handleCurrentChange_consultant = (pageNum: number) => {
  queryForm_consultant.value.page = pageNum;
  initConsultantTable();
};

//督导表格
const tableData_supervisor = ref([]);
const queryForm_supervisor = ref({
  page: 1,
  size: 9,
  role: 1,
  name: "",
});
const total_supervisor = ref(0);
const initSupervisorTable = async () => {
  //重新定义一个queryForm
  const tmp = {
    page: queryForm_supervisor.value.page - 1,
    size: queryForm_supervisor.value.size,
    role: 2,
    name: queryForm_supervisor.value.name,
  };
  const res = await getSupervisorList(tmp);
  tableData_supervisor.value = res.data.result.counsellorList;
  total_supervisor.value = res.data.result.totalCount;
  console.log("tableData_supervisor");
  console.log(tableData_supervisor.value);
};
//分页器相关
const handleCurrentChange_supervisor = (pageNum: number) => {
  queryForm_supervisor.value.page = pageNum;
  initSupervisorTable();
};

const todayConversationNumber = ref(0);
const todayInConversation = ref(0);
const todayConversationTime = ref("00:00:00");
const initTodayDate = async () => {
  const res = await getConversationSummary();
  console.log("getConversationSummary", res);
  const get_res = res.data.result;
  todayConversationNumber.value = get_res.totalCount;
  todayInConversation.value = get_res.inConversationCnt;
  todayConversationTime.value =
    get_res.hour + ":" + get_res.minute + ":" + get_res.second;
};

const initHomePage = () => {
  //数据初始化
  initTodayDate();
  //表格初始化
  initConsultantTable();
  initSupervisorTable();
};

initHomePage();

//折线图相关
onMounted(async () => {
  const charEle = document.getElementById("char") as HTMLElement;
  const charEch: echarts.ECharts = echarts.init(charEle);
  const charData = await getChartData();
  const x_data = charData.data.result.dateList;
  const y_data = charData.data.result.countList;
  const option: echarts.EChartsOption = {
    title: {
      left: "center",
      text: "7日咨询数量统计",
    },
    xAxis: {
      type: "category",
      data: x_data,
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      show: true,
      boundaryGap: true,
      type: "value",
      minInterval: 1,
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
      },
    },
    series: [
      {
        data: y_data,
        type: "line",
      },
    ],
  };
  charEch.setOption(option);
});
</script>


<style lang="less">
@import "src/styles/variables.less";

.box-card {
  width: 7.5vw;
  height: 22.5vw;
  // margin-right: 100vw;
  .box-header {
    font-size: 18px;
  }
}

.card-table {
  // height: 100%;
  // width: 600px;
  // margin-left: 10px;
  width: 39vw;
  height: 22.5vw;
  margin-left: 2vw;
  // margin-right: 1vw;
  position: relative;
  font-size: 10px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    .head-title {
      margin-left: 32px;
    }
    .el-pagination {
      position: absolute;
      right: 40px;
    }
  }

  .el-row {
    // margin-top: 10px;
    // margin-left: 32px;
    margin-left: 2vw;
  }

  .card-item1 {
    position: relative;
    // width: 150px;
    // height: 60px;
    // margin-right: 20px;
    width: 10vw;
    height: 4vw;
    margin-right: 1vw;
    margin-top: 1vw;
    text-align: center;
  }
  .card-item2 {
    position: relative;
    width: 10vw;
    height: 4vw;
    margin-right: 1vw;
    margin-top: 1vw;
  }
  .card-item3 {
    position: relative;
    width: 10vw;
    height: 4vw;
    margin-right: 1vw;
    margin-top: 1vw;
  }
}

.chart-container {
  width: calc(100% - @sideBarWidth);
  height: 30%;
  position: fixed;

  bottom: 1vw;
  left: 10;
  right: 10;
  z-index: 9;
  transition: all 0.28s;
}
</style>